<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 数组常见用法
        // 数组 引用类型 复杂数据类型 管理同一类型的数据 使用[]创建数组
        let arr = [] // 创建一个空数组
        arr = [23, 34, 45, 56] //创建了一个数字数组，还有其他数组如字符串数组，布尔类型的数组

        // 获取数组元素 使用[]，下标从0开始
        let a1 = arr[0] // 获取数组第一个元素
        console.log(a1);

        // 数组长度 使用.length
        let len = arr.length
        console.log(len);

        // 获取最后一个元素 即数组长度减1
        let last = arr[len - 1]
        console.log(last);
        // 或者：直接写法
        let last1 = arr[arr.length - 1]
        console.log(last1);

        // 数组进阶
        /* 
            1.创建数组
                1.1 使用[]
                1.2 使用new Array()
                1.3 使用Array() 构造函数
            2.访问数组
                2.1 通过索引访问 索引从0开始 let a = arr[0]
                2.2 使用length属性 arr.length
                2.3 最后一个元素 arr[arr.length-1]
            3.修改数组
                3.1 修改数组元素 arr[0] = 100
                3.2 修改数组长度 arr.length = 0
                3.3 添加数组元素 arr[arr.length] = 100
                3.4 添加数组元素 arr.push(100)
            4.数组不同对象
                4.1 数组可以存储不同类型的数据
                4.2 数组可以存储对象 
                4.3 数组可以存储函数 
                4.4 数组可以存储数组
            5.数组方法和属性
                5.1 数组方法：push() pop() shift() unshift() splice() slice() sort() reverse() join() concat() indexOf() lastIndexOf() forEach() map() filter() reduce() every() some() find() findIndex() includes() flat() flatMap() 
                5.2 数组属性：length
        */

        let myArr = new Array();
        myArr[0] = Date.now();
        myArr[1] = myFunction;
        myArr[2] = arr

        function myFunction() {
            console.log("Hello World");
        }
        console.log(myArr);

        //数组属性
        console.log(myArr.length);
        //数组属性
        console.log(myArr.indexOf(myFunction));//获取索引值

        /* 数组方法 */
        //合并数组
        let arr1 = [1, 2, 3];
        let arr2 = [4, 5, 6];
        let arr3 = [7, 8, 9];
        //1.合并两个数组 concat()方法
        let arr4 = arr1.concat(arr2);
        //2.合并三个数组 concat()方法
        let arr5 = arr1.concat(arr2, arr3);
        console.log(arr4);
        console.log(arr5);

        //3.将数组作为字符串输出 join()方法
        document.write("<p id='btn'>点击按钮将数组作为字符串输出</p>")
        document.write("<button onclick = 'myFunc()'>点击按钮</button>")
        function myFunc() {
            //定义数组
            strArr = ['concat', 'join'];
            //获取需要输出的标签名id
            let btnStr = document.getElementById("btn");
            btnStr.innerHTML = strArr.join(",");
        }

        //4.删除数组的最后一个元素 pop()方法
        let arr6 = ['concat', 'join', 'pop'];
        alert(arr6.pop());//弹出最后一个元素 'pop'
        document.write('<br>' + arr6);

        //5.数组的末尾添加新的元素 push()方法
        alert(arr6.push('push'));//弹出数组长度 3,push方法返回数组的新长度
        document.write('<br>' + arr6);

        //6.将数组的元素顺序反转排序 reverse()方法
        document.write('<br>' + arr6.reverse());

        //7.删除数组的第一个元素 shift()方法
        alert(arr6.shift());//弹出第一个元素 'push'
        document.write('<br>' + arr6);

        //8.从数组中选择元素-->截取元素 slice()方法
        let arr7 = ['slice', 'splice', 'sort'];
        document.write('<br>需要截取元素的数组--->' + arr7)
        document.write('<br>从1开始到2结束--->' + arr7.slice(1, 2));//截取数组元素，从索引1开始，到索引2结束，不包括索引2
        document.write('<br>从1开始到数组末尾结束--->' + arr7.slice(1));//截取数组元素，从索引1开始，到数组末尾结束

        //9.数组排序--字母顺序升序 sort()方法
        let arr8 = ['c', 'a', 'b'];
        document.write('<br>需要排序的数组--->' + arr8)
        document.write('<br>字母顺序升序--->' + arr8.sort());

        //10.数组排序--数字顺序升序 sort()方法
        let arr9 = [3, 1, 4, 2];
        document.write('<br>需要排序的数组--->' + arr9)
        document.write('<br>数字顺序升序--->' + arr9.sort());

        //11.数组排序--数字顺序降序 sort()方法
        let arr10 = [3, 1, 4, 2];
        document.write('<br>需要排序的数组--->' + arr10)
        document.write('<br>数字顺序降序--->' + arr10.sort().reverse());

        //12.在任意位置添加元素 splice()方法
        let arr11 = ['splice', 'sort', 'reverse'];
        document.write('<br>需要添加元素的数组--->' + arr11)
        document.write('<br>从索引1开始添加元素--->' + arr11.splice(1, 0, 'add'));
        document.write('<br>从索引1开始添加元素--->' + arr11);//添加元素后数组长度变为4

        //13.查找元素的索引 indexOf()方法
        let arr12 = ['indexOf', 'lastIndexOf', 'includes'];
        document.write('<br>需要查找元素的数组--->' + arr12)
        document.write('<br>查找元素的索引--->' + arr12.indexOf('includes'));

        //14.转换数组到字符串
        let arr13 = [1, 2, 3, 4, 5];
        document.write('<br>需要转换的数组--->' + arr13)
        document.write('<br>转换数组到字符串--->' + arr13.toString());

        //15.在数组开头添加新元素 unshift()方法
        let arr14 = ['unshift', 'push', 'pop'];
        document.write('<br>需要添加元素的数组--->' + arr14)
        document.write('<br>在数组开头添加新元素--->' + arr14.unshift('unshift'));
        document.write('<br>在数组开头添加新元素--->' + arr14);//添加元素后数组长度变为4


        let arr15 = []//创建空数组
        // 在开头添加一个或多个元素，并返回添加后数组的新长度
        document.write(`<br>返回值：${arr15.unshift(1, 2, 3)} ,数组：${arr15}`);
        // 在末尾添加一个或多个元素，并返回添加后数组的新长度
        document.write(`<br>返回值：${arr15.push(4, 5, 6)} ,数组：${arr15}`);
        //在数组任意位置添加元素
        document.write(`<br>返回值：${arr15.splice(1, 0, 'a', 'b')} ,数组：${arr15}`);

        //在开头删除元素，并返回删除后的数组
        document.write(`<br>返回值：${arr15.shift()} ,数组：${arr15}`);
        //在末尾删除元素，并返回删除后的数组
        document.write(`<br>返回值：${arr15.pop()} ,数组：${arr15}`);
        //删除数组中指定位置的元素
        document.write(`<br>返回值：${arr15.splice(1, 1)} ,数组：${arr15}`);

        //查找元素，使用数组名[下标]查找
        document.write(`<br>返回值：${arr15[0]} ,数组：${arr15}`);
        //修改元素，使用数组名[下标]修改
        arr15[0] = '修改后的元素';
        document.write(`<br>返回值：${arr15[0]} ,数组：${arr15}`);






    </script>
</body>

</html>